<template>
  <div class="app-container">
    <!--    员工所属设备弹窗-->
    <el-dialog title="设备清单" :visible.sync="dialogTableVisible">
      <el-table height="250" stripe="true" :data="deviceDialogData">
        <el-table-column property="ip" label="IP" align="center" />
        <el-table-column property="mac" label="MAC" width="150x" align="center">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>型号: {{ scope.row.model }}</p>
              <p>系统版本: {{ scope.row.currentResidence }}</p>
              <p>账号: {{ scope.row.accountNumber }}</p>
              <p>密码: {{ scope.row.accountPassword }}</p>
              <p>生产日期: {{ scope.row.productDate }}</p>
              <p>购买价格: {{ scope.row.purchasePrice }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.mac }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column property="operationTime" label="设备入网时间" align="center" />
        <el-table-column property="location" label="存放位置" align="center" />
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'DeviceOfWork',
  props: {
    dialogTableVisible: {
      type: Boolean,
      default: false
    },
    deviceDialogData: {
      type: Array,
      default: () => { return [] }
    }
  },
  data() {
    return {
      // eslint-disable-next-line vue/no-dupe-keys
      dialogTableVisible: false,
      // eslint-disable-next-line vue/no-dupe-keys
      deviceData: []
    }
  },
  created() {
    this.getDeviceInfo()
  },
  methods: {
    // 根据操作人id查询数据
    getDeviceInfo() {
      this.deviceData = this.deviceDialogData
    }
  }
}
</script>
<style scoped>

</style>
